<template>
    <div>
        <div style="width: 100%;height: 400px; background-color: #f5f5f5" @click="onekey">
            <van-icon name="scan" size="40" style="margin-left: 10px;margin-top: 50px;" />
            <van-icon name="setting-o" size="40" style="margin-left:290px;" />
            <div style="width: 100%;">
                <p style="text-align: center;font-size:18px;margin-top: 50px;">登录小默旅行，体验更多功能</p>
            </div>
            <div style="width: 100%;">
                <img src="../../../4.png" alt="" style="margin-left:65px;border-radius: 22px;margin-top: 30px;">
                <img src="../../../3.png" alt="" style="margin-left:31px;border-radius: 22px;">
                <img src="../../../1.png" alt="" style="margin-left:31px;border-radius: 22px;">
                <img src="../../../2.png" alt="" style="margin-left:31px;border-radius: 22px;">
            </div>
        </div>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }" round closeable>
            <p style="text-align: center;font-size: 18px;margin-top: 40px;">登录享受更多服务</p>
            <p style="text-align: center;font-size: 18px;"><input type="text" v-model="tel" maxlength="11"
                    style="border: none;text-align: center;"></p>
            <button class="btn2" @click="login">一键快捷登录</button>
            <div style="margin-top:60px ;margin-left: 142px;">
                <p style="color: darkgrey;">其他登录方式</p>
                <img src="../../../3.png" alt="" style="margin-left: -25px;" @click="phone">
                <img src="../../../1.png" alt="" style="margin-left: 10px;" @click="zhang">
                <img src="../../../2.png" alt="" style="margin-left: 10px;">
            </div>
            <p style="font-size: 13px;color: darkgrey;margin-left: 30px;margin-top: 26px;"><input
                    type="radio" />我已阅读并同意<span style="color: rgb(52,120,246);">《服务协议》</span>和<span
                    style="color: rgb(52,120,246);">《个人信息保护指引》</span></p>
        </van-popup>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
const router = useRouter();
const show = ref(false);
let tel = ref('');
const onekey = () => {
    show.value = true;
}
const login = async () => {
    let obj = {
        phone: tel.value
    }
    let res = await axios.post('http://localhost:3000/login_1', obj)
    const reg = /^[1][3-9][0-9]{9}$/;
    if (tel.value == '' || tel.value == undefined || tel.value == null) {
        return showToast('请输入手机号');
    } else {
        if ((!reg.test(tel.value)) && tel.value != '') {
            showToast('请输入正确的手机号')
        } else {
            return
        }
    }
}
const phone = () => {
    router.push('/register_one')
}
const zhang = () => {
    router.push('/register_two')
}
</script>

<style lang="scss" scoped>
.btn2 {
    width: 300px;
    height: 50px;
    border: none;
    background-color: rgb(36, 153, 248);
    border-radius: 10px;
    color: white;
    margin-left: 45px;
    font-size: 18px
}
</style>